<template>
  <el-dialog
    title="线路地点"
    :visible.sync="dialog"
    width="50%"
    @close="close"
    @closed="close"
    :close-on-click-modal="false"
    append-to-body
    :destroy-on-close="true"
  >
    <div id="container" />
  </el-dialog>
</template>

<script>
import { parseTime } from "@/utils/ruoyi.js";
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "47f39bbd3f47b91d1cbb2311453a0b4e",
};
export default {
  props: {
    dialogVisible2: Boolean,
    lineRowData: Object,
  },
  data() {
    return {
      //控制弹框
      dialog: this.dialogVisible2,
      // 弹出层标题
      title: "",
      rules: {
        handleInfo: [
          {
            pattern:
              /^((\w|[\u4E00-\u9FFF]|[\u3000-\u301e\ufe10-\ufe19\ufe30-\ufe44\ufe50-\ufe6b\uff01-\uffee]){0,200})$/,
            message: "请输入200个以内的数字/常用文字/中文符号",
          },
        ],
      },
      // 地图相关
      map: null,
      marker: null,
      gps: {
        name: [],
        itme: [],
        dian: [],
      },
    };
  },
  created() {
    this.initMap();
  },
  watch: {
    dialogVisible() {
      this.dialog = this.dialogVisible2;
    },
  },
  methods: {
    close() {
      this.$emit("update:dialogVisible2", false);
    },
    initMap() {
      this.gps = {
        name: [],
        dian: [],
        itme: [],
      };
      this.lineRowData.sites.forEach((e, i) => {
        this.gps.dian.push([parseFloat(e.longitude), parseFloat(e.latitude)]);
        this.gps.name.push(e.siteName);
        this.gps.itme.push(i + 1);
      });
      AMapLoader.load({
        key: "a423874b07f076758138f4d36f6f74df",
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.MapType"],
      })
        .then((AMap) => {
          // 初始化地图
          this.map = new AMap.Map("container", {
            viewMode: "2D",
            zoom: 13,
            // 江北区人民政府
            // center: [106.580323, 29.612549],
            center: this.gps.dian[0],
            resizeEnable: true,
          });
          this.map.addControl(new AMap.MapType({ defaultType: 1 }));
          this.map.addControl(new AMap.Scale());
          this.map.addControl(
            new AMap.HawkEye({
              isOpen: true,
            })
          );
          var lnglats = this.gps.dian;
          var markers = [];
          for (var i = 0; i < lnglats.length; i++) {
            var lnglat = lnglats[i];
            var markerContent =
              "" +
              '<div class="custom-content-marker" style="text-align: center;width: 30px;height: 30px; background-size: 100% 100%;background-image: url(\'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png\')">' +
              '<span style="color: white">' +
              this.gps.itme[i] +
              "</span>" +
              "</div>";

            var marker = new AMap.Marker({
              position: new AMap.LngLat(lnglat[0], lnglat[1]),
              // 将 html 传给 content
              content: markerContent,
              // 以 icon 的 [center bottom] 为原点
              offset: new AMap.Pixel(-13, -30),
            });
            var div =
              "<div className='info' style='text-shadow:-1px 0 white,0 1px white,1px 0 white,0 -1px white;'>" +
              "<p>" +
              this.lineRowData.lineSites[i].startTime +
              "-" +
              this.lineRowData.lineSites[i].finishTime +
              "</p>" +
              "<p>" +
              this.gps.name[i] +
              "</p>" +
              "</div>";
            marker.setLabel({
              direction: "right",
              offset: new AMap.Pixel(-1, 0), //设置文本标注偏移量
              content: div, //设置文本标注内容
            });
            markers.push(marker);
          }

          var overlayGroups = new AMap.OverlayGroup(markers);
          this.map.add(overlayGroups);

          var polyline = new AMap.Polyline({
            path: this.gps.dian,
            strokeColor: "#3366FF",
            strokeWeight: 6,
            strokeOpacity: 1,
            strokeStyle: "solid",
            strokeDasharray: [10, 5],
            lineJoin: "round",
            lineCap:'square',
            showDir:true
          });
          polyline.setMap(this.map);

          // this.map.on('click', this.addMarker);
          // this.searchMap();
          this.map.setFitView(null, false, [150, 60, 100, 60]);
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  background: #083f79;
  color: #fff;
}
::v-deep .el-dialog__title {
  color: #fff;
}

#container {
  overflow: hidden;
  width: 100%;
  height: 600px;
  margin: 0;
  font-family: "微软雅黑";
}
</style>
<style>
.amap-marker-label {
  border: 0;
  background-color: transparent;
}

.el-image-viewer__img {
  max-height: 80% !important;
}
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

/* 高德搜索栏层级 */
.amap-sug-result {
  z-index: 2999 !important;
}
.amap-ctrl-overlay-layer {
  display: none !important;
}
.amap-ui-ctrl-layer-base-item input {
  appearance: auto;
}
</style>
